{% extends "trees/base.html" %}
{% block title %}Monitor {{ tree.tag_code }} - JM3{% endblock %}
{% block content %}
<h2 class="mb-1">Monitor Tree</h2>
<p class="text-muted">{{ tree.tag_code }} &mdash; {{ tree.species.common_name }}
  {% if tree.latest_activity %}&middot; last seen {{ tree.latest_activity.created_at|date:"M j, Y" }}{% endif %}</p>

<form method="post" class="bg-white p-3 p-md-4 rounded shadow-sm">
  {% csrf_token %}
  <label class="form-label fw-bold">Is the tree alive?</label>
  <div class="row g-2 mb-3">
    <div class="col-6">
      <button type="submit" name="status" value="alive" class="btn btn-success btn-lg w-100 py-4">✅<br>Alive</button>
    </div>
    <div class="col-6">
      <button type="button" id="deadBtn" class="btn btn-danger btn-lg w-100 py-4">❌<br>Dead</button>
    </div>
  </div>

  <div id="deadSection" hidden>
    <label class="form-label fw-bold">What happened?</label>
    <div class="row g-2 mb-3">
      <div class="col-6">
        <input type="radio" class="btn-check" name="death_reason" id="dr-drought" value="drought">
        <label class="btn btn-outline-secondary w-100" for="dr-drought">🌵 Drought</label>
      </div>
      <div class="col-6">
        <input type="radio" class="btn-check" name="death_reason" id="dr-pests" value="pests">
        <label class="btn btn-outline-secondary w-100" for="dr-pests">🐛 Pests</label>
      </div>
      <div class="col-6">
        <input type="radio" class="btn-check" name="death_reason" id="dr-human" value="human">
        <label class="btn btn-outline-secondary w-100" for="dr-human">🪓 Human Activity</label>
      </div>
      <div class="col-6">
        <input type="radio" class="btn-check" name="death_reason" id="dr-unknown" value="unknown">
        <label class="btn btn-outline-secondary w-100" for="dr-unknown">❓ Unknown</label>
      </div>
    </div>
    <button type="submit" name="status" value="dead" class="btn btn-danger w-100 mb-3">Confirm Dead</button>
  </div>

  <details class="mb-2">
    <summary class="text-muted">Add photo / height / notes (optional)</summary>
    <div class="mt-3">
      <label class="form-label">Photo (camera only)</label>
      {% include "trees/_camera.html" %}
      <div class="mb-3 mt-2"><label class="form-label">Height (cm)</label><input type="number" step="0.1" name="height_cm" class="form-control"></div>
      <div class="mb-3"><label class="form-label">Notes</label><textarea name="notes" rows="2" class="form-control" placeholder="Optional notes"></textarea></div>
    </div>
  </details>
</form>
{% endblock %}
{% block extra_js %}
<script>
  document.getElementById('deadBtn').addEventListener('click', () => {
    document.getElementById('deadSection').hidden = false;
    document.getElementById('deadBtn').classList.add('active');
  });
</script>
{% endblock %}